<template>
  <a-modal
    v-model:visible="visible"
    title="添加计费规则"
    @cancel="cancel"
    @ok="handleOk"
    :footer="null"
  >
    <a-form
      class="add-rule-from"
      :model="formState"
      ref="formRef"
      name="basic"
      layout="vertical"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item
        label="计费规则编号"
        name="ruleNumber"
        :rules="[{ required: true, message: '请填写计费规则编号!' }]"
      >
        <a-input v-model:value="formState.ruleNumber" />
      </a-form-item>

      <a-form-item
        label="计费规则名称"
        name="ruleName"
        :rules="[{ required: true, message: '请填写计费规则名称!' }]"
      >
        <a-input v-model:value="formState.ruleName" />
      </a-form-item>

      <a-form-item
        label="计费方式（全天收费）"
        name="chargeType"
        :rules="[{ required: true, message: '请选择计费方式' }]"
      >
        <a-radio-group v-model:value="formState.chargeType" :options="options" />
      </a-form-item>

      <!-- 如果一行里面有了多个表单元素，一定是多个a-form-item元素组成的，再用父元素写个div来布局 -->
      <div class="free-time">
        <a-form-item label="免费时长" name="freeDuration">
          <a-input v-model:value="formState.freeDuration" />
        </a-form-item>
        <div class="item-text">分钟</div>
        <a-form-item label="收费上限" name="chargeCeiling">
          <a-input v-model:value="formState.chargeCeiling" />
        </a-form-item>
        <div class="item-text">元</div>
      </div>

      <div class="price-rules" v-if="formState.chargeType === 'duration'">
        <div>每</div>
        <a-form-item
          label="计费规则"
          name="durationTime"
          :rules="[{ required: true, message: '请填写计费规则' }]"
        >
          <!-- <a-input v-model:value="formState.password" /> -->
          <a-input-number id="inputNumber" v-model:value="formState.durationTime" :min="1" />
        </a-form-item>
        <a-form-item
          label=" "
          name="durationType"
          :rules="[{ required: true, message: '请选择收费类型' }]"
        >
          <a-select style="width: 120px" v-model:value="formState.durationType">
            <a-select-option value="hour">小时</a-select-option>
            <a-select-option value="minute">分钟</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label=" "
          name="durationPrice"
          :rules="[{ required: true, message: '请填写单位价格' }]"
        >
          <a-input v-model:value="formState.durationPrice" />
        </a-form-item>
        <div>元</div>
      </div>
      <div class="turn-rules" v-if="formState.chargeType === 'turn'">
        <a-form-item
          label="计费规则"
          name="turnPrice"
          :rules="[{ required: true, message: '请填写每次收费金额' }]"
        >
          <span>每次</span>
          <a-input v-model:value="formState.turnPrice" placeholder="请输入金额" />
          <span>元</span>
        </a-form-item>
      </div>
      <div class="partition-rules" v-if="formState.chargeType === 'partition'">
        <a-form-item
          label="计费规则"
          name="partitionFrameTime"
          :rules="[{ required: true, message: '请填写段内时间' }]"
        >
          <a-input-number v-model:value="formState.partitionFrameTime" :min="1" />
          <span>小时内，每小时收费</span>
        </a-form-item>
        <a-form-item
          label=" "
          name="partitionFramePrice"
          :rules="[{ required: true, message: '请填写段内费用' }]"
        >
          <a-input v-model:value="formState.partitionFramePrice" />
          <span>元</span>
        </a-form-item>
        <a-form-item
          label=" "
          name="partitionIncreaseTime"
          :rules="[{ required: true, message: '请填写超出时间' }]"
        >
          <span>每增加</span>
          <a-input-number v-model:value="formState.partitionIncreaseTime" :min="1" />
          <span>小时，增加</span>
        </a-form-item>
        <a-form-item
          label=" "
          name="partitionIncreasePrice"
          :rules="[{ required: true, message: '请填写超出范围价格' }]"
        >
          <a-input v-model:value="formState.partitionIncreasePrice" />
          <span>元</span>
        </a-form-item>
      </div>

      <a-form-item>
        <a-button @click="cancel">取消</a-button>
        <a-button type="primary" html-type="submit">确定</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { addRuleReqeust } from '@/apis/cart';

const visible = ref(false);
const formRef = ref<any>(null);
const emits = defineEmits(['ADD_SUCCESS']);

const formState = reactive<any>({
  ruleNumber: '',
  ruleName: '',
  freeDuration: '',
  chargeCeiling: '',
  chargeType: '',
  // 下面3个字段是时长收费的
  durationTime: null,
  durationType: null,
  durationPrice: null,
  // 下面一个字段是按次收费
  turnPrice: null,
  // 下面4个字段是分段收费的
  partitionFrameTime: null,
  partitionFramePrice: null,
  partitionIncreaseTime: null,
  partitionIncreasePrice: null,
});
const options = [
  // label就是给用户看的页面显示。 value就是选中以后的值，给后端java使用的
  { label: '时长收费', value: 'duration' },
  { label: '按次收费', value: 'turn' },
  { label: '分段收费', value: 'partition' },
];

const onFinish = async () => {
  console.log('校验成功');
  const res: any = await addRuleReqeust(formState);
  console.log(res);
  if (res.code === 10000) {
    // 关弹窗，刷新列表页面(父组件)
    cancel();
    emits('ADD_SUCCESS');
  }
};

const open = () => {
  visible.value = true;
};

const handleOk = () => {
  visible.value = false;
};

// 3种关闭弹出框的事件
const cancel = () => {
  visible.value = false;
  // 清除所有校验，还有重置数据
  formRef.value.resetFields();
};

// vue3里面组件的属性和方法都是封闭起来的，外部组件要想使用，必须通过defineExpose向外抛出对应的函数或者属性
defineExpose({ open });
</script>

<style lang="scss" scoped>
.add-rule-from {
  :deep(.ant-radio-wrapper) {
    border: 1px solid #1890ff;
    padding: 8px;
    border-radius: 5px;
    margin-right: 20px;
  }
  .free-time {
    display: flex;
    align-items: center;
    .item-text {
      margin: 0 5px;
    }
  }
  .price-rules {
    display: flex;
    align-items: center;
    .ant-form-item {
      width: 80px;
      &:nth-child(3) {
        width: 120px;
        margin-left: 20px;
        margin-right: 15px;
      }
    }
  }
  .turn-rules {
    // display: flex;
    // align-items: center;
    .ant-input {
      width: 200px;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  .partition-rules {
    display: flex;
    flex-wrap: wrap;
    .ant-input {
      width: 100px;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
}
</style>
